<template>
  <div v-if="isShow" class="title-container">
    <span class="title">{{ titleName }}</span>
    <p-icon class="icon" type="close" @click="handleClose"></p-icon>
  </div>
</template>

<script>
import screenfull from '@/utils/screenfull';
export default {
  props: {
    titleName: {
      type: String,
      default: '全屏',
    },
    iconName: {
      type: String,
      default: 'New',
    },
    color: {
      type: String,
      default: 'red',
    },
  },
  data() {
    return {
      isFullscreen: false,
    };
  },
  computed: {
    isShow() {
      return this.isFullscreen;
    },
  },
  mounted() {
    screenfull.onchange((e) => {
      this.isFullscreen = screenfull.isFullscreen;
    });
  },
  methods: {
    handleClose() {
      screenfull.exit();
    },
  },
};
</script>

<style lang="less" scoped>
.title-container {
  border-bottom: 1px solid #e5e6e9;
  background: #f7f7f8;
  height: 48px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
  .title {
    font-size: 16px;
    color: #040c2c;
    font-weight: 500;
  }
  .icon {
    margin-left: auto;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>